<template>
  <div class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <div class="flex"
      style="width: 340px; height: 100%">
      <el-card shadow="never"
        class="box-card flex-sub"
        style="overflow: auto">
        <div class="flex"
          style="margin-bottom: 1rem; justify-content: space-between">
          <el-button size="small"
            @click="toExpandAll('是')">
            <i class="el-icon-plus"
              style="color: #606266" />
            <span style="color: #606266">全部展开</span>
          </el-button>

          <el-button size="small"
            @click="toExpandAll('否')">
            <i class="el-icon-minus"
              style="color: #606266" />
            <span style="color: #606266">全部收起</span>
          </el-button>
        </div>

        <div style="border: 1px solid #c8c8c8; padding: 0.7rem; margin-top: 1rem">
          <div style="margin-right: 0px; overflow: auto"
            :style="{ height: treeHeight }"
            class="box-card">
            <el-tree ref="refTree"
              :data="tree"
              node-key="id"
              accordion
              :highlight-current="highlightCurrent"
              :expand-on-click-node="expandOnClickNode"
              :default-expand-all="expandAll"
              @node-click="nodeClick">
              <span class="custom-tree-node"
                slot-scope="{ node, data }">
                <span>
                  <el-radio v-model="selectedGrid"
                    :label="data.id"
                    @input="onInput">{{ node.label }}</el-radio></span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-card>
    </div>
    <div class="flex flex-sub"
      style="margin-left: 1rem; width: calc(100% - 350px)">
      <el-card shadow="never"
        class="box-card flex-sub"
        style="overflow: auto">
        <div class="div-query">
          <div class="collapse">
            <div class="collapse-header"
              @click="panelActive = !panelActive">
              <i class="collapse-header-icon"
                :class="[
                  panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
                ]" />
              {{ panelActive ? "隐藏" : "展开" }}查询条件
            </div>
            <div class="collapse-content">
              <el-collapse-transition>
                <div v-show="panelActive">
                  <el-form size="small"
                    label-position="right">
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="控制设备"
                          label-width="80px">
                          <el-input v-model="searchModel.deviceName"
                            placeholder="输入控制设备"
                            clearable
                            class="filter-item search-item" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="编号"
                          label-width="80px">
                          <el-input v-model="searchModel.deviceCode"
                            placeholder="输入编号"
                            clearable
                            class="filter-item search-item" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item style="margin-left: 10px">
                          <el-button type="primary"
                            icon="el-icon-search"
                            @click="toSearch"
                            style="margin-right: 10px">搜索</el-button>
                          <el-button type="info"
                            @click="toReset"
                            style="margin-right: 10px">
                            <i class="el-icon-delete" />
                            重置
                          </el-button>

                          <el-button size="small"
                            @click="getDataList">
                            <i class="el-icon-refresh"
                              style="color: #606266" />
                            <span style="color: #606266">刷新</span>
                          </el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>

        <div style="margin-bottom: 8px">
          <el-button size="small"
            type="primary"
            style="margin-right: 20px"
            @click="toAdd({ id: -1 }, 'add')">
            <i class="iconfont icon-xinzenghuizong"
              style="font-size: 13px;margin-right: 5px" />新增控制设备
          </el-button>
        </div>
        <el-tabs v-model="tabActiveName"
          @tab-click="tabClick">
          <el-tab-pane v-for="item in controlTypeList"
            :key="item.dictValue"
            :name="item.dictText"
            :label="item.dictText">
            <el-table ref="elTable"
              v-loading="loading"
              border
              fit
              size="medium "
              :data="dataList"
              :row-key="row => row.id"
              style="width: 100%">
              <el-table-column align="center"
                type="index"
                width="50"
                fixed
                label="#"
                :index="indexMethod" />

              <af-table-column align="center"
                label="控制设备"
                prop="deviceName" />
              <af-table-column align="center"
                label="编号"
                prop="deviceCode" />
              <af-table-column align="center"
                label="厂家"
                prop="factory" />
              <af-table-column align="center"
                label="安装位置"
                prop="installSite" />
              <af-table-column align="center"
                label="安装时间"
                prop="installTime"
                width="150px" />

              <el-table-column align="center"
                label="操作区"
                fixed="right"
                width="150">
                <template slot-scope="{ row }">
                  <el-tooltip effect="dark"
                    content="查看"
                    placement="top-start">
                    <i class="iconfont icon-chakanxiangqing2 i-detail"
                      @click="toDetail(row)" />
                  </el-tooltip>

                  <i class="iconfont icon-fengefu i-fengefu" />

                  <el-tooltip effect="dark"
                    content="编辑"
                    placement="top-start">
                    <i class="iconfont icon-bianji2 i-edit"
                      @click="toAdd(row, 'edit')" />
                  </el-tooltip>
                  <i class="iconfont icon-fengefu i-fengefu" />

                  <el-tooltip effect="dark"
                    content="删除"
                    placement="top-start">
                    <el-popconfirm :title="'确定删除【' + row.deviceName + '】该控制设备吗？'"
                      placement="top"
                      @confirm="toSingleDelete(row, '确定')"
                      @cancel="toSingleDelete(row, '取消')">
                      <i class="iconfont icon-shanchu i-delete"
                        slot="reference" />
                    </el-popconfirm>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0"
              :total="total"
              :page.sync="pagination.pageNum"
              :limit.sync="pagination.pageSize"
              :page-sizes="pageSizeOptions"
              @pagination="getDataList" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>


    <remote-control-add v-if="addDialogObj.isVisible"
      ref="addDialog"
      :dialog-visible="addDialogObj.isVisible"
      :title="addDialogObj.title"
      :params="params"
      @close="dialogClose('addDialogObj')"
      @submit="afterSubmit" />

    <remote-control-detail v-if="detailDialogObj.isVisible"
      ref="detailDialog"
      :dialog-visible="detailDialogObj.isVisible"
      :title="detailDialogObj.title"
      :params="params"
      @close="dialogClose('detailDialogObj')" />
  </div>
</template>
<script>
import dataTableMixins from "@/mixins/data-table-mixins";
import Pagination from "@/components/Pagination";
import gridManageApi from "@/api/grid-manage";
import deviceManageApi from "@/api/device-manage";
import remoteControlApi from "@/api/remote-control";


import RemoteControlAdd from "./components/Add";
import RemoteControlDetail from "./components/Detail";
export default {
  components: {
    Pagination,
    RemoteControlAdd,
    RemoteControlDetail
  },
  mixins: [dataTableMixins],
  data () {
    return {
      treeHeight: "0px",
      tree: [],
      expandOnClickNode: false,
      expandAll: false,
      highlightCurrent: true,
      showRightMenu: false,
      selectedGrid: "",

      controlTypeList: [],
      tabActiveName: '',
      controlType: null
    };
  },
  mounted () {
    this.getHeightAndWidth();
    this.getTree();
    this.getControlTypeList()
  },
  methods: {
    getHeightAndWidth () {
      let clientHeight = 0;
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5; // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5; // 网页可见区域高
      }
      this.treeHeight = clientHeight - 250 + "px";
    },

    getTree () {
      gridManageApi.getGridTree()
        .then((res) => {
          this.tree = res.data.data.rows;
        })
        .catch(() => {
          this.tree = [];
        });
    },
    toExpandAll (text) {
      if (text === "是") {
        this.expandAll = true;
      } else {
        this.expandAll = false;
      }
      for (var i = 0; i < this.$refs.refTree.store._getAllNodes().length; i++) {
        this.$refs.refTree.store._getAllNodes()[i].expanded = this.expandAll;
      }
    },
    nodeClick (data) {

    },
    onInput () {
      this.getDataList();
    },

    getControlTypeList () {
      const data = {
        fieldName: "control_model",
        tableName: "t_equipment_control"
      };
      deviceManageApi.getDictValueAttr(data).then(ret => {
        this.controlTypeList = ret.data.dictValue;
        this.tabActiveName = this.controlTypeList[0].dictText
        this.controlType = this.controlTypeList[0].dictValue
        this.getDataList();
      });
    },

    getDataList () {
      // this.loading = true;
      const searchModel = this.formatSearchData(this.searchModel);
      searchModel.parentGuid = this.selectedGrid;
      searchModel.controlType = this.controlType;
      remoteControlApi
        .getControlDeviceList({
          ...this.pagination,
          ...searchModel,
          ...this.sort,
        })
        .then((ret) => {
          this.dataList = ret.data.data.rows;
          this.total = ret.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.total = 0;
        });
    },
    toSearch () {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    toReset () {
      this.searchModel = {};
      this.sort = {};
      // this.$refs.elTable.clearSort();
      // this.$refs.elTable.clearFilter();
      this.toSearch();
    },

    indexMethod (index) {
      return this.formatIndex(index, this.pagination);
    },

    toAdd (data) {
      this.params = {
        item: data
      };
      this.addDialogObj.title =
        data.id === -1 ? "远程控制 ＞添加" : "远程控制 ＞编辑";
      this.addDialogObj.isVisible = true;
    },
    afterSubmit (operationType) {
      console.log('operationType=', operationType)
      this.tabActiveName = operationType
      this.tabClick()
    },

    toDetail (data) {
      this.params = {
        item: data
      };
      this.detailDialogObj.title = "远程控制 ＞控制设备详情";
      this.detailDialogObj.isVisible = true;
    },

    toSingleDelete (data, type) {
      if (type === "确定") {
        this.deleteConfirm(data.id, "");
      }
    },
    deleteConfirm (ids) {
      this.deleteLoading = true;
      remoteControlApi
        .deleteControlDevice({ id: ids })
        .then(() => {
          this.$message.success("删除成功！");
          this.deleteLoading = false;
          this.toReset();
        })
        .catch(() => {
          this.deleteLoading = false;
        });
    },

    tabClick () {
      const obj = this.controlTypeList.filter((e) => {
        return this.tabActiveName == e.dictText
      })
      if (obj.length > 0) {
        this.controlType = obj[0].dictValue
      }
      this.dataList = []
      this.total = 0
      this.toReset()
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/part-custom";

.view {
  overflow: auto;
  display: flex;
  flex-wrap: wrap;

  .view-item {
    border: 1px solid #e6e8eb;
    height: 260px;
    border-radius: 2px;
    width: 32%;
    margin-right: 1%;
    margin-bottom: 1%;
    padding: 10px;
    color: #272c33;
    position: relative;
  }
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;

}

.flex-1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.status-circle {
  width: 8px;
  height: 8px;
  border-radius: 319px;
  background: black;
  margin-right: 4px;
}

/deep/.el-radio__input.is-checked+.el-radio__label {
  color: #409eff;
  background-color: #77b8fd;
  color: #fff;
}

/deep/ .check-detail .el-button {
  padding: 7px;
}
</style>
